<template>
  <div>
    <div class="pub-progress">
      <div class="step" :class="{active:orderInfo.taskStatus==10}">
        <div class="block">开始派单</div>
      </div>
      <div class="step" :class="{active:orderInfo.taskStatus==20}">
        <div class="block">完成任务</div>
      </div>
    </div>
    <!-- 新生儿信息 -->
    <div class="pub-content">
      <div class="pub-info">
        <div class="pi-title">
          <span class="title">新生儿信息</span>
          <span class="time">客户于{{ orderInfo.createTime }} 发布</span>
          <template v-if="orderInfo.taskStatus==10">
            <b style="float:right;font-size:18px;color:red;">
              倒计时: {{ day }}天 {{ hr }}时 {{ min }}分
              {{ sec }}秒
            </b>
          </template>

        </div>
        <div class="pi-content aa">
          <el-row style="width:100%;">
            <el-col style="jus" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
              <el-row style="width:100%;">
                <el-col :span="6">
                  <span>姓:</span>
                  {{ orderInfo.firstName | names }}
                </el-col>
                <el-col :span="12">
                  <span>性别:</span>
                  {{ orderInfo.sex | sex }}
                </el-col>
              </el-row>
              <el-row>
                <span>出生日期:</span>
                {{ orderInfo.firstName | name1 }}
                {{ orderInfo.bornTime }}
              </el-row>
              <el-row>
                <span>出生日期:</span>
                农历: {{ gongli }}
              </el-row>
              <el-row>
                <span>出生地:</span>
                {{ orderInfo.bornArea }}
              </el-row>
            </el-col>
            <el-col style="jus" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
              <el-row :span="12">
                <span>起名字数:</span>
                {{ orderInfo.nameLength | lengths }}
              </el-row>
              <el-row>
                <span>固定字:</span>
                {{
                orderInfo.fixChar == ""
                ? "无限制"
                : orderInfo.fixChar
                }}
              </el-row>
              <el-row style="width:100%;">
                <span>父亲姓名:</span>
                {{ orderInfo.fatherName }}
              </el-row>
              <el-row style="width:100%;">
                <span>母亲姓名:</span>
                {{ orderInfo.motherName }}
              </el-row>
              <!-- <el-col :span="12">
                                    <span>详细要求:</span>文件用来对 uni-app
                                    进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar
                                    等。文件用来对 uni-app
                                    进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar
                                    等。文件用来对 uni-app
                                    进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar
                                    等。
              </el-col>-->
            </el-col>
            <el-col style="jus" :xs="24" :sm="12" :md="10" :lg="10" :xl="10">
              <el-row>
                <span>详细要求:</span>
                {{orderInfo.memo}}
              </el-row>
              <el-row>
                <span style="vertical-align: top;">附件:</span>
                <div class="demo-image__preview" style="display: inline-block;">
                  <el-image
                    v-for="(item, index) in orderInfo.files"
                    :key="index"
                    style="width: 70px; height: 70px;margin-right: 20px;"
                    :src="item"
                    :preview-src-list="orderInfo.files"
                  ></el-image>
                </div>
              </el-row>
            </el-col>
            <!-- <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                            <el-row style="width:100%;">
                                <el-col :span="12">
                                    <span>起名字数:</span
                                    >{{ orderInfo.nameLength | lengths }}
                                </el-col>
                                <el-col :span="12">
                                    <span>详细要求:</span>文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
                                </el-col>
                            </el-row>
            </el-col>-->
          </el-row>
          <!-- <el-row style="width:100%;">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                            <span>附件:</span>
                            <div class="thumb-wrap">
                                <div
                                    class="thumb-box"
                                    @click="showPreview(item)"
                                    v-for="(item, index) in orderInfo.files"
                                    :key="index"
                                >
                                    <img :src="item" alt="" />
                                </div>
                            </div>
                        </el-col>
          </el-row>-->
        </div>
        <!-- <div class="pi-content">
            <div class="djs">
              倒计时: {{ day }}天 {{ hr }}时 {{ min }}分 {{ sec }}秒
            </div>
            <div>
              
            </div>
            <div class="infos left01">
              <div class="i-group">
                <label for="">姓:</label>
                <span class="value">{{ orderInfo.firstName | names }}</span>
              </div>
              <div class="i-group">
                <label for="">起名字数:</label>
                <span class="value">{{ orderInfo.nameLength | lengths }}</span>
              </div>
              <div class="i-group">
                <label for="">固定字位置:</label>
                <span class="value">{{ orderInfo.fixPos | areas }} </span>
              </div>
              <div class="i-group">
                <label for="">出生日期:</label>
                <span class="value">{{ orderInfo.firstName | name1 }}  {{ orderInfo.bornTime }}</span>
              </div>
              <div class="i-group">
                <label for="">出生地:</label>
                <span class="value">{{ orderInfo.bornArea }}</span>
              </div>
            </div>

            <div class="infos left02">
              <div class="i-group">
                <label for="">性别:</label>
                <span class="value">{{ orderInfo.sex | sex }}</span>
              </div>
              
              <div class="i-group">
                <label for="">固定字:</label>
                <span class="value">{{ orderInfo.fixChar == '' ? '无限制' : orderInfo.fixChar }}</span>
              </div>
              <div class="i-group">
                <label for="">父亲名字:</label>
                <span class="value">{{ orderInfo.fatherName }}</span>
              </div>
              <div class="i-group">
                <label for="">母亲名字:</label>
                <span class="value">{{ orderInfo.motherName }}</span>
              </div>
            </div>

            <div class="infos left03">
              <div class="i-group noflex">
                <label for="">详细要求:</label>
                <p class="desc">
                    {{ orderInfo.memo }}
                </p>
              </div>
              
            </div>
            
            
        </div>-->
        <div class="right">
          <el-table :data="tableData" border style="width: auto;">
            <el-table-column prop="all" label="总回复数量"></el-table-column>
            <el-table-column prop="allDone" label="已回复"></el-table-column>
            <el-table-column prop="rest" label="剩余回复数量"></el-table-column>
          </el-table>
        </div>
      </div>

      <div class="bus-infos">
        <div class="bi-title">
          <span>商家信息</span>
        </div>

        <div class="bi-list">
          <ul>
            <li
              :class="[item.t_status == 1 ? 'zhongbiao' : (item.t_status == 2 ? 'weizhongbiao' : (item.sh_status == '3' ? 'baomi':''))]"
              v-for="(item, index) in merchantList"
              :key="item.id"
            >
              <span class="time">{{item.ctime | formatDate}}</span>
              <template v-if="item.t_status==1">
                 <span
                         class="choose-winner times"
                         v-if="isMerchant == false"
                 >已中标</span>
              </template>
              <template v-if="item.t_status==2">
                 <span
                         class="choose-winner times"
                         v-if="isMerchant == false"
                 >未中标</span>
              </template>
              <template v-if="item.t_status==3">
                 <span
                         class="choose-winner times"
                         v-if="isMerchant == false"
                         @click="
                                    winner(item.mid)
                                "
                 >中标</span>
              </template>
              <div class="bus-info">
                <div class="img-box">
                  <img
                    :src="
                                            item.himg_url
                                        "
                  />
                </div>
                <div class="bus-name">
                  <p class="name">{{ item.nickname }}</p>
                  <p class="id">ID:{{item.mid}}</p>
                </div>
                <div class="btn merchant-resume">
                  <router-link
                    target="_blank"
                    :to="{
                                            path: '/userresume',
                                            query: {
                                                merchantGuid:
                                                    item.mid
                                            }
                                        }"
                  >个人简历</router-link>
                </div>
              </div>
              <div class="bus-detail">
                <div class="bd-name">
                  <span>名字</span>
                  <a href="javascript:;" @click="merchantDetail(index)">查看详情</a>
                </div>
                <div class="bd-list">
                  <dl>
                    <dd
                      v-for="(item1,
                                            index1) in item.replyList"
                      :key="index1"
                    >{{ item1.qcname }}</dd>
                  </dl>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <el-dialog title="图片预览" :visible.sync="isShowPreview" width="40%">
        <img style="max-width: 100%;" :src="previewImgSrc" alt />
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowPreview = false">取 消</el-button>
          <el-button type="primary" @click="isShowPreview = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import calendar from "@/views/sign/lib/timer.js";
import util from "@/util/util.js";
import zx from "@/assets/images/ic-index01.png";
import { formatDate } from "@/util/util.js";
export default {
  data() {
    return {
      IsZhogbiao: true,
      isShowPreview: false, // 是否显示预览大图的弹框
      previewImgSrc: "", // 预览的图片路径
      timers: "",
      zx,
      currentIndex: 1, // 从第几页开始
      pageSize: 10, // 每一页的数量
      guid: "",
      orderInfo: "",
      merchantList: [], // 商家列表
      tableData: [],
      day: 0,
      hr: 0,
      min: 0,
      sec: 0,
      preViewImg: [], // 预览的图片数组
      chantReplyMsg: [], // 商户的回复列表
      isMerchant: false // 是否商家访问，商家访问时候，隐藏中标，我要投标等按钮
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time.replace(/-/g,"/"));
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    sex(val) {
      if (val == 0) {
        return "女";
      } else if (val == 1) {
        return "男";
      } else {
        return "未知";
      }
    },
    names(val) {
      if (val) {
        return val.split("/")[1];
      } else {
        return val;
      }
    },
    name1(val) {
      if (val) {
        return val.split("/")[0];
      } else {
        return val;
      }
    },
    lengths(val) {
      if (val == 1) {
        return "无限制";
      } else if (val == 2) {
        return "两个字";
      } else if (val == 3) {
        return "三个字";
      } else if (val == 4) {
        return "四个字";
      }
    },
    areas(val) {
      if (val == 0) {
        return "固定中间";
      } else if (val == 1) {
        return "固定末尾";
      } else if (val == 2) {
        return "没有要求";
      }
    }
  },
  computed: {
    nongli() {
      if (this.orderInfo.bornTime) {
        let nows = new Date(this.orderInfo.bornTime.replace(/-/g,"/"));
        let Y = nows.getFullYear() + "-";
        let M =
          (nows.getMonth() + 1 < 10
            ? "0" + (nows.getMonth() + 1)
            : nows.getMonth() + 1) + "-";
        let Ys = nows.getFullYear();
        let Ms =
          nows.getMonth() + 1 < 10
            ? "0" + (nows.getMonth() + 1)
            : nows.getMonth() + 1;
        let D = nows.getDate();
        let h = nows.getHours();
        let m = nows.getMinutes();
        let s = nows.getSeconds();
        let timers = Y + M + D;
        var timer = this.getLunarDate(timers);
        consolo.log(timer)
        // var nongli = this.toSolar(Y,M,D)
        if (this.orderInfo.bornStatus == 1) {
          //return "农历  " +  timer.lunarYear + '-' + timer.lunarMonth + '-' + timer.lunarDay+" "+h+":"+m+":"+s;
          return "农历  ";
        } else {
          var aaa = calendar.lunar2solar(Ys, Ms, D);
          //return "公历  " + aaa.cYear + '-'+ aaa.cMonth + '-' + aaa.cDay+" "+h+":"+m+":"+s;
          return "公历  ";
          // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
        }
      } else {
        return 0;
      }
    },
    gongli() {
      if (this.orderInfo.bornTime) {
        let nows = new Date(this.orderInfo.bornTime.replace(/-/g,"/"));
        let Y = nows.getFullYear() + "-";
        let M =
          (nows.getMonth() + 1 < 10
            ? "0" + (nows.getMonth() + 1)
            : nows.getMonth() + 1) + "-";
        let Ys = nows.getFullYear();
        let Ms =
          nows.getMonth() + 1 < 10
            ? "0" + (nows.getMonth() + 1)
            : nows.getMonth() + 1;
        let D = nows.getDate();
        let h = nows.getHours();
        let m = nows.getMinutes();
        let s = nows.getSeconds();
        let timers = Y + M + D;
        var timer = this.getLunarDate(timers);

        // var nongli = this.toSolar(Y,M,D)
        if (this.orderInfo.bornStatus == 1) {
          //return "公历  " +  timers+" "+h+":"+m+":"+s;
          return (
            timer.lunarYear +
            "-" +
            timer.lunarMonth +
            "-" +
            timer.lunarDay +
            " " +
            h +
            ":" +
            m +
            ":" +
            s
          );
        } else {
          var aaa = calendar.lunar2solar(Ys, Ms, D);
          ///return "农历  " + timers+" "+h+":"+m+":"+s;
          return (
            aaa.cYear +
            "-" +
            aaa.cMonth +
            "-" +
            aaa.cDay +
            " " +
            h +
            ":" +
            m +
            ":" +
            s
          );
          // return nongli[0] + '-' + nongli[1] + '-' + nongli[2]+" "+h+":"+m+":"+s;
        }
      } else {
        return 0;
      }
    }
  },
  methods: {
    // 跳转查看商家详情
    merchantDetail(index) {
      console.log(this.merchantList[index]);
      let params = encodeURIComponent(JSON.stringify(this.merchantList[index]));
      let routeData = this.$router.resolve({
        path: "/resume",
        query: {
          params: params,
          m:this.$route.query.m
        }
      });
      window.open(routeData.href, "_blank");
      //console.log(params);
    },
    /**
     * 预览附件的大图
     */
    showPreview(src) {
      this.previewImgSrc = src;
      this.isShowPreview = true;
    },
    // 格式化时间
    formatTime(time) {
      return util.formatTime(time);
    },
    userTaskDetail() {
      // 订单详情
      this.$ajax
        .post("https://api.zhubaba.cn/userTask/detailNoSession", {
          taskGuid: this.guid
        })
        .then(res => {
          if (res.data.code == 0) {
            this.orderInfo = res.data.data;
            console.log(this.orderInfo);
            this.timers = res.data.data.createTime;
            // 目前倒计时为发布时间+7天减去当前时间计算得来，后续会修改
            this.countdown(
              new Date(res.data.data.createTime.replace(/-/g,"/")).valueOf() + 86400 * 7 * 1000
            );
            var obj = {
              all: res.data.data.replyCount,
              allDone: res.data.data.currentReplyCount,
              rest: res.data.data.replyCount - res.data.data.currentReplyCount
            };
            this.tableData.push(obj);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },

    // 查看回复列表
    userTaskReplyList() {
      this.$ajax
        .post("https://api.zhubaba.cn/merchant/task/detail/" + this.guid, {
          page: 1,
          size: 1000
        })
        .then(res => {
          if (res.data.code == 0) {
            let ret = res.data.data;
            let tid = res.data.tid.data;
            // 格式化时间
            for (let i = 0; i < ret.length; i++) {
              ret[i].ctime = util.formatTime(ret[i].ctime * 1000);
              ret[i].replyList = [];
              for (let j = 0; j < tid.length; j++) {
                if (tid[j].tid == ret[i].tid) ret[i].replyList.push(tid[j]);
              }
            }
            ret[0].t_status == 1
              ? (this.IsZhogbiao = true)
              : (this.IsZhogbiao = false);
            this.merchantList = ret;
            console.log(this.merchantList,res)
            //alert(this.merchantList.t_status);
          }
          // else { this.$message.error(res.data.msg) };
        });
    },
    winner(mid) {
      // 选取中标人
      // 如果已经选了中标人，不操作
      if (this.orderInfo.winnerId)
        return this.$message({
          type: "success",
          message: "已投标"
        });
      this.$confirm(
        '<span style="font-weight:bold">您确定采纳该方案为该项目的中标方案吗？</span><br><span style="color: rgb(255,77,8)">注意方案只能采纳一次，请慎重！</span>',
        "采纳方案",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true
        }
      )
        .then(() => {
          this.$ajax
            .post("/userTask/chooseReply", {
              taskGuid: this.guid,
              merchantGuid: mid
            })
            .then(res => {
              if (res.data.code == 0) {
                this.orderInfo.winnerId = this.guid;
                this.$message({
                  type: "success",
                  message: "选择成功!"
                });
              } else {
                this.$message.error(res.data.msg);
              }
            });
        })
        .catch(() => {});
    },
    countdown: function(timer) {
      // 定义结束时间戳
      const end = timer;
      // 定义当前时间戳
      const now = Date.parse(new Date());

      // 做判断当倒计时结束时都为0
      if (now >= end) {
        this.day = 0;
        this.hr = 0;
        this.min = 0;
        this.sec = 0;
        return;
      }
      // 用结束时间减去当前时间获得倒计时时间戳
      const msec = end - now;

      let day = parseInt(msec / 1000 / 60 / 60 / 24); //算出天数
      let hr = parseInt((msec / 1000 / 60 / 60) % 24); //算出小时数
      let min = parseInt((msec / 1000 / 60) % 60); //算出分钟数
      let sec = parseInt((msec / 1000) % 60); //算出秒数
      //给数据赋值
      this.day = day;
      this.hr = hr > 9 ? hr : "0" + hr;
      this.min = min > 9 ? min : "0" + min;
      this.sec = sec > 9 ? sec : "0" + sec;
      //定义this指向
      const that = this;
      timer--;
      // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
      setTimeout(function() {
        that.countdown(timer);
      }, 1000);
    },
    getLunarDate(date) {
      // 阳历转农历

      var lunar = {
        tg: "甲乙丙丁戊己庚辛壬癸",
        dz: "子丑寅卯辰巳午未申酉戌亥",
        number: "一二三四五六七八九十",
        year: "鼠牛虎兔龙蛇马羊猴鸡狗猪",
        month: "正二三四五六七八九十冬腊",
        monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334],
        calendar: [
          0xa4b,
          0x5164b,
          0x6a5,
          0x6d4,
          0x415b5,
          0x2b6,
          0x957,
          0x2092f,
          0x497,
          0x60c96,
          0xd4a,
          0xea5,
          0x50da9,
          0x5ad,
          0x2b6,
          0x3126e,
          0x92e,
          0x7192d,
          0xc95,
          0xd4a,
          0x61b4a,
          0xb55,
          0x56a,
          0x4155b,
          0x25d,
          0x92d,
          0x2192b,
          0xa95,
          0x71695,
          0x6ca,
          0xb55,
          0x50ab5,
          0x4da,
          0xa5b,
          0x30a57,
          0x52b,
          0x8152a,
          0xe95,
          0x6aa,
          0x615aa,
          0xab5,
          0x4b6,
          0x414ae,
          0xa57,
          0x526,
          0x31d26,
          0xd95,
          0x70b55,
          0x56a,
          0x96d,
          0x5095d,
          0x4ad,
          0xa4d,
          0x41a4d,
          0xd25,
          0x81aa5,
          0xb54,
          0xb6a,
          0x612da,
          0x95b,
          0x49b,
          0x41497,
          0xa4b,
          0xa164b,
          0x6a5,
          0x6d4,
          0x615b4,
          0xab6,
          0x957,
          0x5092f,
          0x497,
          0x64b,
          0x30d4a,
          0xea5,
          0x80d65,
          0x5ac,
          0xab6,
          0x5126d,
          0x92e,
          0xc96,
          0x41a95,
          0xd4a,
          0xda5,
          0x20b55,
          0x56a,
          0x7155b,
          0x25d,
          0x92d,
          0x5192b,
          0xa95,
          0xb4a,
          0x416aa,
          0xad5,
          0x90ab5,
          0x4ba,
          0xa5b,
          0x60a57,
          0x52b,
          0xa93,
          0x40e95
        ]
      };

      var year, month, day;
      if (!date) {
        (date = new Date()),
          (year = date.getFullYear()),
          (month = date.getMonth()),
          (day = date.getDate());
      } else {
        (date = date.split("-")),
          (year = parseInt(date[0])),
          (month = date[1] - 1),
          (day = parseInt(date[2]));
      }

      if (year < 1921 || year > 2020) {
        return {};
      }

      var total, m, n, k, bit, lunarYear, lunarMonth, lunarDay;
      var isEnd = false;
      var tmp = year;
      if (tmp < 1900) {
        tmp += 1900;
      }
      total =
        (tmp - 1921) * 365 +
        Math.floor((tmp - 1921) / 4) +
        lunar.monthadd[month] +
        day -
        38;
      if (year % 4 == 0 && month > 1) {
        total++;
      }
      for (m = 0; ; m++) {
        k = lunar.calendar[m] < 0xfff ? 11 : 12;
        for (n = k; n >= 0; n--) {
          bit = (lunar.calendar[m] >> n) & 1;
          if (total <= 29 + bit) {
            isEnd = true;
            break;
          }
          total = total - 29 - bit;
        }
        if (isEnd) break;
      }
      lunarYear = 1921 + m;
      lunarMonth = k - n + 1;
      lunarDay = total;
      if (k == 12) {
        if (lunarMonth == Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth = 1 - lunarMonth;
        }
        if (lunarMonth > Math.floor(lunar.calendar[m] / 0x10000) + 1) {
          lunarMonth--;
        }
      }

      return {
        lunarYear: lunarYear,
        lunarMonth: lunarMonth,
        lunarDay: lunarDay
      };
    }
  },
  created() {
    var guid = this.$route.query.id;
    //var guid = 'e4efa177085b41c9889d11b6eac6c32f';
    if (this.$route.query.m == "sh") {
      this.isMerchant = true;
    }
    if (guid) {
      this.guid = guid;
      this.userTaskDetail(); // 订单详情
      this.userTaskReplyList(); // 查看回复列表
    } else {
      this.$message.error("guid没有获取到,请返回重试!");
      return;
    }
  }
};
</script>

<style lang="scss" scoped>
.pi-content {
  position: relative;
  .djs {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 14px;
    color: red;
  }
}
.aa {
  display: block !important;
  padding: 20px 30px;
  font-size: 14px;
  .el-row {
    margin-bottom: 8px;
    line-height: 28px;
    span {
      color: #405cda;
      margin-right: 14px;
    }
  }
}

.choose-winner {
  cursor: pointer;
}

.merchant-resume {
  position: relative;
}

.merchant-resume a {
  position: absolute;
  width: 74px;
  line-height: 28px;
  font-size: 14px;
  border: 1px solid #405cda;
  border-radius: 4px;
  text-align: center;
  color: #405cda;
}

.thumb-wrap {
  display: inline-block;
}

.thumb-wrap .thumb-box {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin-right: 20px;
  display: inline-block;
}

.thumb-box img {
  max-width: 100%;
  min-height: 100%;
}

.bi-list ul li {
  float: left;
}
  /deep/ .el-col-lg-8{
    width: 30.3333% !important;
    margin-left: 3% !important;
  }
</style>